/* eslint-disable react/jsx-no-bind */
/* eslint-disable no-unused-vars */
import React, { ReactNode, useEffect, useState } from 'react'
import Layout from '../../../src/components/Layout'
import SearchTable from './SearchTable/index'
import OnlineFriends from '../OnlineFriends'

const Home: React.FC = (): ReactNode => {
  const [viewportHeight, setViewportHeight] = useState(window.innerHeight)
  const [initData, setInitData] = useState<any>(JSON.parse(localStorage.getItem('init_data')!))

  const FriendsDom: React.CSSProperties = { display: 'flex', height: viewportHeight - 164 + 'px' }

  useEffect(() => {
    const handleResize = () => {
      setViewportHeight(window.innerHeight)
    }

    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return (
    <Layout>
      <div style={{ display: 'flex' }}>
        <SearchTable />
        <div style={FriendsDom}>
          <OnlineFriends initData={initData} friends={JSON.parse(localStorage.getItem('friendsList')!) || []} />
        </div>
      </div>
    </Layout>
  )
}

export default Home
